//定义全局变量
var element_key;
var element_gid;
var time=new Date();
var year=time.getFullYear(); //获取年份
var month=time.getMonth()+1; //获取月份
var day=time.getDate();  //获取日期
if(parseInt(day)<10){
    day='0'+day;
}
var start_time = 0;
var end_time = 0;
var start_time_t = 0;
var end_time_t = 0;
if (month==1){
    start_time = (year-1) + "年12月01日";
    end_time = year + "年01月"+ day +"日";
}else{
    start_time = year + "年"+ (month-1) +"月01日";
    end_time = year + "年"+ month +"月"+ day +"日";
}

//layui设置
layui.use(['jquery', 'form', 'table', 'layer', 'laydate',  'element', 'tree', 'util', 'carousel'], function(){
    $ = layui.$;
    form = layui.form;
    table = layui.table;
    layer = layui.layer;
    laydate = layui.laydate;
    element = layui.element;
    tree = layui.tree;
    util = layui.util;
    carousel = layui.carousel;


    laydate.render({
        elem: '#start_date', //指定元素
        type: 'date',
        value: start_time,
        format: 'yyyy年MM月dd日',
        trigger: 'click',
        showBottom: false,
        // 选中某个年份后即刻关闭弹出框，年份扔可以左右点击选择
        done: function(value, date, endDate){


        },
    });

    laydate.render({
        elem: '#end_date', //指定元素
        type: 'date',
        value: end_time,
        format: 'yyyy年MM月dd日',
        trigger: 'click',
        showBottom: false,
        // 选中某个年份后即刻关闭弹出框，年份扔可以左右点击选择
        done: function(value, date, endDate){


        },
    });



});

//监测图表
var HYChart1 = echarts.init(document.getElementById('real_time_chart'));

let Data = {
    times: ["2019-10-28 11:00:00", "2019-10-28 12:00:00", "2019-10-28 13:00:00", "2019-10-28 14:00:00", "2019-10-28 15:00:00", "2019-10-28 16:00:00", "2019-10-28 17:00:00", "2019-10-28 18:00:00", "2019-10-28 19:00:00", "2019-10-28 20:00:00", "2019-10-28 21:00:00", "2019-10-28 22:00:00"],
    timeData: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
    windxData: ["东南", "北", "东南", "东", "东南", "东南", "西", "北", "南", "东南", "东南", "东南"],
    windsData: ["2.8/2", "1.4/1", "2.7/2", "3/2", "2.2/2", "1.4/1", "1.5/1", "1.9/2", "1.4/1", "1.8/2", "2/2", "3.4/3"],
    temData: [9, 11, 13, 12, 11, 9, 9, 7, 6, 4, 3, 3],
    rainData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    humData: [76, 76, 70, 62, 58, 53, 50, 49, 46, 44, 44, 42],
};

let colors = ['#FF6863', '#6EAB40', '#3BB5F5'];

option = {
    color: colors,
    toolbox: {
        feature: {
            saveAsImage: { show: true }
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' },
        formatter: function (params, ticket, callback) {
            let index = params[0].dataIndex;
            let Htm = `雨量：${Data.humData[index]}mm`;
            return Htm;
        }
    },
    legend: {
        data: ['雨量']
    },
    grid: {
        top: '13%',
        bottom: '8%',
        left: '8%',
        right: '6%'
    },

    xAxis: [
        {
            type: 'category',
            position: 'bottom',
            offset: 0,
            // axisLabel: {
            //     textStyle: {
            //         color: 'rgba(255,255,255,.2)',
            //         // opacity: 0.1,
            //     }
            // },
            // axisLine:{
            //     lineStyle:{
            //         color:'rgba(255,255,255,.2)',
            //     }
            // },
            data: Data.timeData
        }
    ],
    yAxis: [{
        type: 'value',
        name: '雨量(mm)',
        scale: true,
        position: 'left',
        axisTick: { lineStyle: { color: colors[2] }, inside: true },
        nameTextStyle: { color: colors[2] },
        axisLabel: { color: colors[2] },
        splitLine: { show: false }
    }
    ],
    series: [{
        name: '雨量',
        type: 'line',
        step: false,
        yAxisIndex: 0,
        color: colors[2],
        label: { normal: { show: true, position: 'top' } },
        data: Data.humData
    }
    ]
};

$(document).ready(function(){
    HYChart1.setOption(option);
});

// <!--    <div class="content layui-anim layui-anim-scale"  style="width: 100%;background:white;height: 90%;">-->
// <!--        &lt;!&ndash; 左侧菜单开始 &ndash;&gt;-->
// <!--        <div class="left-nav">-->
// <!--            <div id="side-nav">-->
// <!--                <ul id="nav">-->
// <!--                    <li>-->
// <!--                        <a href="javascript:;">-->
// <!--                            <i class="iconfont left-nav-li" >&#xe704;</i>-->
// <!--                            <cite>基本信息</cite>-->
// <!--                            <i class="iconfont nav_right">&#xe697;</i>-->
// <!--                        </a>-->
// <!--                        <ul class="sub-menu">-->
// <!--                            <li>-->
// <!--                                <a >-->
// <!--                                    <i class="iconfont">&#xe6a7;</i>-->
// <!--                                    <cite id="real_rain_information">水库</cite>-->
//     <!--                                </a>-->
//     <!--                            </li>-->
//     <!--                            <li>-->
//     <!--                                <a >-->
//     <!--                                    <i class="iconfont">&#xe6a7;</i>-->
// <!--                                    <cite>河流</cite>-->
// <!--                                </a>-->
// <!--                            </li>-->
// <!--                            <li>-->
// <!--                                <a >-->
// <!--                                    <i class="iconfont">&#xe6a7;</i>-->
// <!--                                    <cite>渠道</cite>-->
// <!--                                </a>-->
// <!--                            </li>-->
// <!--                            <li>-->
// <!--                                <a >-->
// <!--                                    <i class="iconfont">&#xe6a7;</i>-->
// <!--                                    <cite>首部</cite>-->
// <!--                                </a>-->
// <!--                            </li>-->
// <!--                            <li>-->
// <!--                                <a >-->
// <!--                                    <i class="iconfont">&#xe6a7;</i>-->
// <!--                                    <cite>水闸</cite>-->
// <!--                                </a>-->
// <!--                            </li>-->
// <!--                            <li>-->
// <!--                                <a >-->
// <!--                                    <i class="iconfont">&#xe6a7;</i>-->
// <!--                                    <cite>机电井</cite>-->
// <!--                                </a>-->
// <!--                            </li>-->
// <!--                            <li>-->
// <!--                                <a >-->
// <!--                                    <i class="iconfont">&#xe6a7;</i>-->
// <!--                                    <cite>水电站</cite>-->
// <!--                                </a>-->
// <!--                            </li>-->
// <!--                            <li>-->
// <!--                                <a >-->
// <!--                                    <i class="iconfont">&#xe6a7;</i>-->
// <!--                                    <cite>泵站</cite>-->
// <!--                                </a>-->
// <!--                            </li>-->
// <!--                            <li>-->
// <!--                                <a >-->
// <!--                                    <i class="iconfont">&#xe6a7;</i>-->
// <!--                                    <cite>堤防</cite>-->
// <!--                                </a>-->
// <!--                            </li>-->
// <!--                            <li>-->
// <!--                                <a >-->
// <!--                                    <i class="iconfont">&#xe6a7;</i>-->
// <!--                                    <cite>取水口</cite>-->
// <!--                                </a>-->
// <!--                            </li>-->
// <!--                            <li>-->
// <!--                                <a >-->
// <!--                                    <i class="iconfont">&#xe6a7;</i>-->
// <!--                                    <cite>泄洪通道</cite>-->
// <!--                                </a>-->
// <!--                            </li>-->
//
// <!--                            <li>-->
// <!--                                <a >-->
// <!--                                    <i class="iconfont">&#xe6a7;</i>-->
// <!--                                    <cite>人饮工程</cite>-->
// <!--                                </a>-->
// <!--                            </li>-->
// <!--                            <li>-->
// <!--                                <a >-->
// <!--                                    <i class="iconfont">&#xe6a7;</i>-->
// <!--                                    <cite>水文测站</cite>-->
// <!--                                </a>-->
// <!--                            </li>-->
//
// <!--                            <li>-->
// <!--                                <a >-->
// <!--                                    <i class="iconfont">&#xe6a7;</i>-->
// <!--                                    <cite>灌区测水点</cite>-->
// <!--                                </a>-->
// <!--                            </li>-->
// <!--                        </ul>-->
// <!--                    </li>-->
//
// <!--                    <li>-->
// <!--                        <a href="javascript:;">-->
// <!--                            <i class="iconfont left-nav-li" >&#xe6f6;</i>-->
// <!--                            <cite>人员管理</cite>-->
// <!--                            <i class="iconfont nav_right">&#xe697;</i>-->
// <!--                        </a>-->
// <!--                    </li>-->
// <!--                </ul>-->
// <!--            </div>-->
// <!--        </div>-->
// <!--        &lt;!&ndash; 左侧菜单结束 &ndash;&gt;-->
// <!--        &lt;!&ndash; 右侧内容开始&ndash;&gt;-->
// <!--        <div class="layui-fluid" style="background-color: #cccccc;width: 88.5%;margin-left: 11.5%;height: 100%;padding: 0;">-->
// <!--            <div class="layui-card" style="height: 100%;">-->
// <!--                <div class="layui-card-header dev_water_info_1" style="padding: 10px;">-->
// <!--                    <form class="layui-form" action="" style="padding-left: 16px;">-->
// <!--                        <div class="layui-form-item">-->
// <!--                            水库选择：-->
// <!--                            <div style="display: inline-block;width: 12%;margin-right: 20px;" >-->
// <!--                                <input type="text" name="title" required  lay-verify="required" placeholder="请输入水库名称" autocomplete="off" class="layui-input">-->
// <!--                            </div>-->
// <!--                            <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="padding: 0 14px;height: 36px;line-height: 0;"><i class="layui-icon">&#xe615;</i>查询</button>-->
// <!--                            <button type="button" class="layui-btn layui-btn-radius" style="padding: 0 14px;height: 36px;line-height: 0;float: right;"><i class="layui-icon">&#xe654;</i>新增水库</button>-->
// <!--                        </div>-->
// <!--                    </form>-->
//
// <!--                </div>-->
// <!--                <div class="layui-card-body " style="height: 90%;">-->
// <!--                    <div class="layui-row" style="height: 790px;">-->
// <!--                        <div class="layui-col-md12" style="overflow: scroll;overflow-x: hidden; overflow-y: auto;height: 611px;">-->
// <!--                            <table class="layui-table" lay-even style="margin: 0px;">-->
// <!--                                <colgroup>-->
// <!--                                    <col width="80">-->
// <!--                                    <col width="240">-->
// <!--                                    <col width="200">-->
// <!--                                    <col width="200">-->
// <!--                                    <col width="180">-->
// <!--                                    <col width="180">-->
// <!--                                    <col width="180">-->
// <!--                                    <col width="180">-->
// <!--                                    <col >-->
// <!--                                </colgroup>-->
// <!--                                <tbody>-->
// <!--                                <tr style="background-color: #5FB878;color: white;height: 60px;">-->
// <!--                                    <td>序号</td>-->
// <!--                                    <td>工程名称</td>-->
// <!--                                    <td>所在区划</td>-->
// <!--                                    <td>管理单位</td>-->
// <!--                                    <td>工程等级</td>-->
// <!--                                    <td>集水面积(km²)</td>-->
// <!--                                    <td>正常蓄水位(m)</td>-->
// <!--                                    <td>建设时间</td>-->
// <!--                                    <td>操作</td>-->
// <!--                                </tr>-->
// <!--                                <tr>-->
// <!--                                    <th>1</th>-->
// <!--                                    <td>幸福一号水库</td>-->
// <!--                                    <td>170团</td>-->
// <!--                                    <td>水资源管理中心</td>-->
// <!--                                    <td>一级</td>-->
// <!--                                    <td>520</td>-->
// <!--                                    <td>200</td>-->
// <!--                                    <td>2003-10-16</td>-->
// <!--                                    <td><button  type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="background: #009688;padding: 0 8px;line-height: 0px;height: 34px;"><i class="layui-icon" >&#xe642;</i>编辑</button></td>-->
// <!--                                </tr>-->
// <!--                                <tr>-->
// <!--                                    <th>1</th>-->
// <!--                                    <td>幸福一号水库</td>-->
// <!--                                    <td>170团</td>-->
// <!--                                    <td>水资源管理中心</td>-->
// <!--                                    <td>一级</td>-->
// <!--                                    <td>520</td>-->
// <!--                                    <td>200</td>-->
// <!--                                    <td>2003-10-16</td>-->
// <!--                                    <td><button  type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="background: #009688;padding: 0 8px;line-height: 0px;height: 34px;"><i class="layui-icon" >&#xe642;</i>编辑</button></td>-->
// <!--                                </tr>-->
// <!--                                <tr>-->
// <!--                                    <th>1</th>-->
// <!--                                    <td>幸福一号水库</td>-->
// <!--                                    <td>170团</td>-->
// <!--                                    <td>水资源管理中心</td>-->
// <!--                                    <td>一级</td>-->
// <!--                                    <td>520</td>-->
// <!--                                    <td>200</td>-->
// <!--                                    <td>2003-10-16</td>-->
// <!--                                    <td><button  type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="background: #009688;padding: 0 8px;line-height: 0px;height: 34px;"><i class="layui-icon" >&#xe642;</i>编辑</button></td>-->
// <!--                                </tr>-->
// <!--                                <tr>-->
// <!--                                    <th>1</th>-->
// <!--                                    <td>幸福一号水库</td>-->
// <!--                                    <td>170团</td>-->
// <!--                                    <td>水资源管理中心</td>-->
// <!--                                    <td>一级</td>-->
// <!--                                    <td>520</td>-->
// <!--                                    <td>200</td>-->
// <!--                                    <td>2003-10-16</td>-->
// <!--                                    <td><button  type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="background: #009688;padding: 0 8px;line-height: 0px;height: 34px;"><i class="layui-icon" >&#xe642;</i>编辑</button></td>-->
// <!--                                </tr>-->
// <!--                                <tr>-->
// <!--                                    <th>1</th>-->
// <!--                                    <td>幸福一号水库</td>-->
// <!--                                    <td>170团</td>-->
// <!--                                    <td>水资源管理中心</td>-->
// <!--                                    <td>一级</td>-->
// <!--                                    <td>520</td>-->
// <!--                                    <td>200</td>-->
// <!--                                    <td>2003-10-16</td>-->
// <!--                                    <td><button  type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="background: #009688;padding: 0 8px;line-height: 0px;height: 34px;"><i class="layui-icon" >&#xe642;</i>编辑</button></td>-->
// <!--                                </tr>-->
// <!--                                <tr>-->
// <!--                                    <th>1</th>-->
// <!--                                    <td>幸福一号水库</td>-->
// <!--                                    <td>170团</td>-->
// <!--                                    <td>水资源管理中心</td>-->
// <!--                                    <td>一级</td>-->
// <!--                                    <td>520</td>-->
// <!--                                    <td>200</td>-->
// <!--                                    <td>2003-10-16</td>-->
// <!--                                    <td><button  type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="background: #009688;padding: 0 8px;line-height: 0px;height: 34px;"><i class="layui-icon" >&#xe642;</i>编辑</button></td>-->
// <!--                                </tr>-->
// <!--                                <tr>-->
// <!--                                    <th>1</th>-->
// <!--                                    <td>幸福一号水库</td>-->
// <!--                                    <td>170团</td>-->
// <!--                                    <td>水资源管理中心</td>-->
// <!--                                    <td>一级</td>-->
// <!--                                    <td>520</td>-->
// <!--                                    <td>200</td>-->
// <!--                                    <td>2003-10-16</td>-->
// <!--                                    <td><button  type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="background: #009688;padding: 0 8px;line-height: 0px;height: 34px;"><i class="layui-icon" >&#xe642;</i>编辑</button></td>-->
// <!--                                </tr>-->
// <!--                                <tr>-->
// <!--                                    <th>1</th>-->
// <!--                                    <td>幸福一号水库</td>-->
// <!--                                    <td>170团</td>-->
// <!--                                    <td>水资源管理中心</td>-->
// <!--                                    <td>一级</td>-->
// <!--                                    <td>520</td>-->
// <!--                                    <td>200</td>-->
// <!--                                    <td>2003-10-16</td>-->
// <!--                                    <td><button  type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="background: #009688;padding: 0 8px;line-height: 0px;height: 34px;"><i class="layui-icon" >&#xe642;</i>编辑</button></td>-->
// <!--                                </tr>-->
// <!--                                <tr>-->
// <!--                                    <th>1</th>-->
// <!--                                    <td>幸福一号水库</td>-->
// <!--                                    <td>170团</td>-->
// <!--                                    <td>水资源管理中心</td>-->
// <!--                                    <td>一级</td>-->
// <!--                                    <td>520</td>-->
// <!--                                    <td>200</td>-->
// <!--                                    <td>2003-10-16</td>-->
// <!--                                    <td><button  type="button" class="layui-btn layui-btn-radius layui-btn-normal" style="background: #009688;padding: 0 8px;line-height: 0px;height: 34px;"><i class="layui-icon" >&#xe642;</i>编辑</button></td>-->
// <!--                                </tr>-->
// <!--                                </tbody>-->
// <!--                            </table>-->
// <!--                        </div>-->
//
// <!--                    </div>-->
// <!--                </div>-->
// <!--            </div>-->
//
// <!--        </div>-->
// <!--        &lt;!&ndash; 右侧内容结束&ndash;&gt;-->
// <!--    </div>-->
// .tooltip {
//     position: relative;
//     background: rgba(0, 0, 0, 0.5);
//     border-radius: 4px;
//     color: white;
//     padding: 4px 8px;
//     opacity: 0.7;
//     white-space: nowrap;
// }
// .tooltip-measure {
//     opacity: 1;
//     font-weight: bold;
// }
// .tooltip-static {
//     background-color: #ffcc33;
//     color: black;
//     border: 1px solid white;
//     border-radius: 9px;
//     font-size: 13px;
// }
// .tooltip-measure:before,
// .tooltip-static:before {
//     border-top: 6px solid rgba(0, 0, 0, 0.5);
//     border-right: 6px solid transparent;
//     border-left: 6px solid transparent;
//     content: "";
//     position: absolute;
//     bottom: -6px;
//     margin-left: -7px;
//     left: 50%;
//
// }
// .tooltip-static:before {
//     border-top-color: #ffcc33;
// }
// .ol-popup {
//     position: absolute;
//     background-color: #000a3f80;
//     color:white;
//     border: 1px solid #28e5e9;
//     -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
//     filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
//     padding: 15px;
//     border-radius: 10px;
//     bottom: 12px;
//     left: -50px;
//     min-width: 200px;
// }
// .ol-popup:after, .ol-popup:before {
//     top: 100%;
//     border: solid transparent;
//     content: " ";
//     height: 0;
//     width: 0;
//     position: absolute;
//     pointer-events: none;
// }
// .ol-popup:after {
//     border-top-color: #28e5e9;
//
//     border-width: 10px;
//     left: 48px;
//     margin-left: -10px;
// }
// .ol-popup:before {
//
//     border-width: 11px;
//     left: 48px;
//     margin-left: -11px;
// }
// .ol-popup-closer {
//     text-decoration: none;
//     position: absolute;
//     top: 2px;
//     right: 8px;
//     color: white;
// }
// .ol-popup-closer:after {
//     content: "✖";
// }
// #popup-content p{
//     margin-bottom: 5px;
// }
// .left-nav{
//     background-color: #ffffff;
//     border-right: 1px solid #dcdcdc;
//     top:0px;
//     padding-top:0px;
// }
//
// .left-nav a.active {
//     border-bottom: 0;
//     border-top: 0;
//     border-right: 0;
//     border-left: 0;
// }
// .env_information tr{
//     height: 39.8px;
// }
// .env_information img{
//     margin-top: 5px;
// }
// .plant>li {
//     width: 11.5%;
//     height: 100%;
// }


